@import '../../assets/iconfont/iconfont';
@import "../styles/placeholders";
@import '../styles/variables';
@import "../styles/mixins";

$table-border: 1px solid #e8e8e8;
$table-bottom-height: 39px;
$td-padding-x: 11px;
$td-padding: 0 $td-padding-x;

$thead-bg: #f1f1f1;
$tr-even-bg: #fafafa;
$tr-hover-bg: #eef8fc;
$icon-asc-sort-deg: 180deg;
$init-color: #70a2c7;

cc-grid {
	display: inline-block;
	width: 100%;
	height: 100%;
	vertical-align: middle;
}

.cc-grid {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border: $table-border;
	background: #fff;

	.cc-grid-table {
		border-collapse: collapse;
		color: $color-text;
		font-family: $font-family;
		font-size: $font-size-base;
		table-layout: fixed;
		width: 100%;

		* {
			box-sizing: border-box;
		}

		tr {
			border-bottom: $table-border;
			height: 42px;

			&:nth-child(even) {
				background-color: $tr-even-bg;
			}

			&.row-selected {
				background-color: $tr-hover-bg;
			}
		}

		thead > tr {
			background: $thead-bg;
			color: $color-text-light;
		}

		tbody > tr:hover {
			background-color: $tr-hover-bg;
		}

		th {
			font-weight: 400;
			padding: $td-padding;
			text-align: left;
			.tooltip {
				color: rgba(40, 135, 223, 0.40);
				font-size: 14px;
				vertical-align: baseline;
			}
		}

		td {
			@include cut-long-text;
			white-space: normal;
			padding: $td-padding;
		}

		.checkbox {
			text-align: center;
			width: 38px;

			& + th,
			& + td {
				padding-left: 0;
			}
		}

		.hidden-columns {
			position: relative;
			width: 56px;
			> span {
				cursor: pointer;
			}
			[cc-dropdown-toggle] {
				color: #0083ba;
				> .main-icon {
					@extend .iconfont;
					@extend .icon-set-up;
					font-size: 20px;
				}
				> .state-icon {
					@extend .iconfont;
					@at-root cc-grid .hidden-columns.dropdown-opened .state-icon {
						@extend .icon-arrow;
						transform: rotate(180deg);
					}
					@at-root cc-grid .hidden-columns.dropdown-closed .state-icon {
						@extend .icon-arrow;
					}
					display: inline-block;
					margin-left: 2px;
					vertical-align: 3px;
					font-size: 12px;
				}
			}
			[cc-dropdown-panel] {
				position: absolute;
				top: 100%;
				right: -1px;
				z-index: 1;
				width: 178px;
				max-height: 162px;
				overflow: auto;
				border: solid 1px #ccc;
				background-color: #fff;
				&.hide {
					display: none !important;
				}
				li {
					white-space: nowrap;
					cursor: pointer;
					padding: 8px;
					&:hover {
						background: #eef8fc;
					}
					cc-checkbox {
						width: 100%;
						span {
							width: 118px;
							display: inline-block;
							@include cut-long-text;
						}
					}
				}
			}
		}
	}

	> .cc-grid-header {
		border-bottom: $table-border;
	}

	> .cc-grid-body {
		position: relative;
		flex: 1;

		> * {
			position: absolute;
			top: 0;
			bottom: 0;
			width: 100%;

			&:not(.datalist) {
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		> .datalist {
			overflow: auto;
		}

		> .error-message {
			font-family: $font-family;
			font-size: $font-size-large;
			color: $font-color-comment;

			span {
				font-family: $font-family;
				font-size: $font-size-large;
				height: 40px;
				line-height: 40px;
				color: $font-color-comment;
				vertical-align: middle;

				&.msg {
					margin-left: 15px;
				}

				&.warning {
					color: #DDD;
					font-size: 40px;
					@extend .iconfont;
					@extend .icon-caution;
				}
			}
		}
	}

	> .cc-grid-footer {
		display: flex;
		align-items: center;
		padding: 6px $td-padding-x;
		background-color: #f6f6f6;
		border-top: $table-border;
		color: #666666;
		white-space: nowrap;

		%number {
			font-family: $font-number;
			margin: 0 1px;
		}

		> span + span {
			margin-left: 18px;
		}

		> .selected-items-count {
			> span {
				@extend %number;
			}

			&.ng-hide + span {
				margin-left: 0;
			}
		}

		> .total-items-count {
			> span {
				@extend %number;
			}
		}

		> .reload {
			padding: 5px 0;
			cursor: pointer;

			.icon-refresh {
				font-size: 12px;
				@extend .iconfont;
				@extend .icon-refresh;
				&::before {
					margin-right: 3px;
				}
			}
		}

		> .delimiter {
			flex: 1;
		}
	}

	.column-sort {
		cursor: pointer;
	}

	.column-sort-asc, .column-sort-desc, .column-sort-none {
		font-size: 12px;
		text-decoration: none;
		display: inline-block;
		color: blue;
	}

	.column-sort-none {
		color: dimgray;
	}

	.column-sort-asc {
		color: #0083BA;
		// 升序
		transform: rotate($icon-asc-sort-deg);
	}
	.column-sort-desc {
		color: #0083BA;
		// 降序
		transform: rotate(0deg);
	}

	.init-msg {
		@extend %absolute-center;
		@include all-link($init-color);

		span {
			font-family: $font-family;
			font-size: $font-size-large;
			height: 40px;
			line-height: 40px;
			color: $font-color-comment;
			vertical-align: middle;

			&.msg {
				margin-left: 15px;
			}

			&.warning {
				color: #DDD;
				font-size: 40px;
				@extend .iconfont;
				@extend .icon-caution;
			}
		}
	}

	cc-grid-cell {
		display: flex;
		justify-content: flex-start;
		word-break: break-all;

		&.left {
			justify-content: flex-start;
		}

		&.right {
			justify-content: flex-end;
		}

		&.center {
			justify-content: center;
		}

	}
}


